<template>
	<view class="">
		<view class="">
			<view class="top_search_daohang">

			</view>


			<view class="search" style="">
				<customerSearchBox ref="searchBox" @getskuList="getskuList"></customerSearchBox>

				<!-- 排序导航 -->
				<view v-if="skuList.length !==0">
					<u-tabs-swiper class="utab" activeColor="#ffff00" ref="tabs" :list="navList"
						:current="swiperCurrent" @change="changeSwiperCurrent" :is-scroll="false" bg-color=""
						font-size="32" bar-width="70" bar-height="20"></u-tabs-swiper>
				</view>

			</view>


			<!-- 瀑布流数据 -->
			<searchWaterfall v-if="skuList.length !==0" :skuList="skuList" class="animated bounceIn"></searchWaterfall>

			<!--  -->
			<view class="" v-else>
				<searchSwiper></searchSwiper>
			</view>

		</view>

	</view>



</template>

<script>
	import customerSearchBox from './components/search-customerSearchBox.vue'
	import searchSwiper from './components/search-swiper.vue'
	import searchWaterfall from './components/search_waterfall.vue'
	export default {
		components: {
			customerSearchBox,
			searchSwiper,
			searchWaterfall
		},
		mounted() {
			this.$nextTick(()=>{
				console.log("奉化市2",this.$refs.searchBox.$refs.customerSearch.searchBoxHeight);
				this.searchBoxHeight = this.$refs.searchBox.$refs.customerSearch.searchBoxHeight
			})
			
		},
		data() {
			return {
				navList: [{
						name: '全部'
					},
					{
						name: '会玩'
					},
					{
						name: '用户'
					},
				],
				searchBoxHeight: 0,
				showFlag: true,
				skuList: [], //瀑布流数据

				//顶部分类
				swiperCurrent: 0,

			}
		},
		onLoad() {

		},
		methods: {

			getskuList(skuList) {
				this.skuList = skuList
			},
			// tab栏切换
			changeSwiperCurrent(index) {
				this.swiperCurrent = index;

			},

		},

		onReachBottom() {
			if (this.page <= this.pages) {
				this.page++
				this.getSkuPageList({
					keyword: this.searchValue
				})
			} else {
				console.log("没有数据了");
			}

		},

	}
</script>

<style scoped lang="scss">
	.top_search_daohang {
		display: flex;
		flex-direction: column;
		padding: 10px 7px 0px 7px;
		background-color: #fbfbfb;

		.bottom_daohang {
			button {
				border-radius: 100px;
				height: 35px;
				text-align: center;
				align-items: center;
				display: flex;
				justify-content: center;
			}
		}
	}

	.search_skuList {

		.text-area {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.search-input {
				flex: 1;
			}
		}
	}
</style>